import React, { useEffect } from 'react'
import { NavBar, Icon } from 'antd-mobile'
import { useHistory } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { getCityList, getHotCity } from '@/store/actions/selectCity'
import currentCity from '@/utils/currentCity'
// 导入react-virtualized的List组件
import { List, AutoSizer } from 'react-virtualized'
import styls from './index.module.scss'

export default function CityList() {
  const history = useHistory()
  const dispatch = useDispatch()
  useEffect(() => {
    // 获取城市列表数据
    dispatch(getCityList())
    // 获取热门城市数据
    dispatch(getHotCity())
  }, [dispatch])

  // 城市列表数据
  const { cityList, hotCity } = useSelector((state) => state.cityList)

  // 处理数据的方法
  const formDtat = async () => {
    // citys数据格式：{a:[],b:[]},城市列表分类数据
    const citys = {}
    // 要先遍历数组
    cityList.map((item) => {
      // 获取每一个城市的首字母
      const first = item.short.substr(0, 1)
      // 判断citys中是否有该分类
      if (citys[first]) {
        // 如果有，直接往里面添加该条数据
        citys[first].push(item)
      } else {
        // 如果没有就创建一个数组，然后把当前的信息添加到该项
        citys[first] = [item]
      }
      return citys
    })
    // console.log(citys)

    // 获取城市索引数据 cityIndex=['a','b','c']
    const cityIndex = Object.keys(citys).sort()
    // console.log(cityIndex)

    // 给城市数据添加热门城市信息
    citys['hot'] = hotCity
    // 将索引值添加到cityIndex里面
    cityIndex.unshift('hot')

    // 获取当前定位的城市的信息
    const cityPosition = await currentCity()
    // 将当前定位的城市信息添加到数据中
    citys['#'] = [cityPosition]
    cityIndex.unshift('#')

    console.log(citys, cityIndex, cityPosition)
    return { citys, cityIndex, cityPosition }
  }
  console.log(formDtat())

  // 列表数据的数据源
  const list = [
    'Brian Vaughn',
    // And so on...
  ]

  // 渲染每一行数据的渲染函数
  function rowRenderer({
    key, // Unique key within array of rows
    index, // 索引号
    isScrolling, // 当前项是否正在滚动中
    isVisible, // 当前项是否可见
    style, // 重点属性：指定每一行的位置（必须）
  }) {
    return (
      <div key={key} style={style}>
        {list[index]}
      </div>
    )
  }

  return (
    <div className={styls.citylist}>
      <NavBar
        className="navbar"
        mode="dark"
        icon={<Icon type="left" />}
        onLeftClick={() => history.go(-1)}
      >
        城市选择
      </NavBar>
      {/* 城市列表 */}
      <AutoSizer>
        {({ height, width }) => (
          <List
            width={width}
            height={height}
            rowCount={list.length}
            rowHeight={20}
            rowRenderer={rowRenderer}
          />
        )}
      </AutoSizer>
    </div>
  )
}
